<template>
	<view>
		<u-empty v-if="addressList == ''" mode="address" iconColor="#f18b49" text="暂无收货地址,点击下方按钮添加" style="margin-top: 150rpx;"></u-empty>
		<view v-else v-for="(item,index) in addressList" :key="index">
			<view class="head-address">
				<view class="address-box">
					<text class="adres-txt-1" v-show="item.is_default == 1">默认</text>
					<text class="adres-txt-2">{{ item.provinces + item.citys + item.areas }}</text>
					<view class="adres-txt-3">{{ item.address }}</view>
					<text class="adres-txt-4">{{ item.accept_name }}</text>
					<text class="adres-txt-5">{{ item.mobile }}</text>
				</view>
				<uni-icons type="compose" size="24" @click="edit(item.id)"></uni-icons>
			</view>
			<u-divider hairline dashed style="margin: 0;"></u-divider>
		</view>
		<view class="bot-btn">
			<view class="btn-box" @click="newAdd()">
				<uni-icons type="plusempty" color="#FFFFFF" style="margin-top: 4rpx;"></uni-icons>
				<text>添加收货地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				addressList: []
			}
		},
		onLoad(e) {
			this.userId = e.userId
		},
		onShow() {
			this.getAddress()
		},
		methods: {
			// 获取全部地址
			getAddress(){
				this.$getHttp(`/gjcApi/address?user_id=${this.userId}`, {}, res => {
					this.addressList = res
				})
			},
			// 编辑地址
			edit(id) {
				uni.navigateTo({
					url: '/pages/my/address/edit-address?id=' + id + '&userId=' + this.userId
				})
			},
			// 添加地址
			newAdd(){
				uni.navigateTo({
					url: '/pages/my/address/new-address?userId=' + this.userId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: $uni-model-color;
}
.head-address{
	display: flex;
	align-items: center;
	padding: 20rpx 35rpx;
	justify-content: space-between;
	.address-box{
		.adres-txt-1{
			color: #FFFFFF;
			padding: 0 8rpx;
			font-size: 26rpx;
			border-radius: 6rpx;
			margin-right: 15rpx;
			background: $uni-text-color;
		}
		.adres-txt-2{
			font-size: 28rpx;
			letter-spacing: 2rpx;
			color: $uni-text-color-placeholder;
		}
		.adres-txt-3{
			margin: 10rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			letter-spacing: 1rpx;
		}
		.adres-txt-4,.adres-txt-5{
			font-size: 28rpx;
			margin-right: 20rpx;
			color: $uni-text-color-placeholder;
		}
	}
}
.bot-btn{
	bottom: 0;
	width: 750rpx;
	position: fixed;
	text-align: center;
	margin-bottom: 30rpx;
	padding: 20rpx 150rpx;
	.btn-box{
		display: flex;
		width: 450rpx;
		color: #FFFFFF;
		padding: 22rpx 0;
		font-size: 30rpx;
		align-items: center;
		background: #ff914d;
		letter-spacing: 2rpx;
		border-radius: 50rpx;
		justify-content: center;
		text{
			margin-left: 4rpx;
		}
	}
}
</style>
